<template>
    <fieldset>
        <legend>商品列表</legend>
        <div id="box">
            <div class="top">
                编号:<input type="text" v-model="num">
                品牌名称:<input type="text" v-model="name"><br>
                产品图片地址:<input type="text" v-model="imgSrc">
                价格:<input type="text" v-model="price">
                <button @click="add">添加</button>
            </div>

            <table border="2">
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="allCheck" @change="allCheckChange"></th>
                        <th>产品图片</th>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tr v-for="(item,index) in round" :key="index">
                    <!-- CheckBox的特殊用法：每点击一个数据，就在数组中添加一条数据，在全选反选中比较实用，但是一定要在绑定数组的时候，添加value的绑定 :value="item" -->
                    <td><input type="checkbox" v-model="checks" :value="item"></td>
                    <td><img :src="item.imgSrc" alt="" height="80"></td>
                    <td>{{item.num}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===0">-</button>&nbsp;
                        <b>{{item.count}}</b>&nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>

            <div class="total">总价格:{{total}}</div>
        </div>

        
    </fieldset>
</template>


<script>
    export default{
        data(){
            return {
                checks:[],
                allCheck:false,
                num:"",
                name:"",
                imgSrc:"",
                price:"",
                count:"",
                round:JSON.parse(localStorage.getItem('text'))??   // 从本地存储中拿数据
                [
                     {
                        id:1,
                        imgSrc:"https://img0.baidu.com/it/u=232034455,26578812&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
                        num:1,
                        name:"张艺兴",
                        price:100,
                        count:1
                    },
                    {
                        id:2,
                        imgSrc:"https://img1.baidu.com/it/u=1333204497,3522022364&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500",
                        num:2,
                        name:"赵丽颖",
                        price:99,
                        count:1
                    },
                    {
                        id:3,
                        imgSrc:"https://img1.baidu.com/it/u=2105079319,591796640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889 ",
                        num:3,
                        name:"迪丽热巴",
                        price:101,
                        count:1
                    }
                ]

                
            }
        },
        methods:{
            // 商品添加
            add(){
                // 先判断编号、产品名称以及价格是否为空
                if(!this.num||!this.name||!this.price){
                    alert('编号 产品名称 价格必填')
                    return
                }


                // 因为round中的数据是以对象的形式储存，所以我们就要以对象的形式往数组中添加数据
                let obj={
                    id:Math.random().toString(32).substr(2),
                    num:this.num,
                    name:this.name,
                    imgSrc:this.imgSrc,
                    price:this.price,
                    count:1
                }

                // 将输入框中填写的数据存到对象之后，在将整个对象添加到数组中
                this.round.push(obj)

                // 本地存储，每添加一条数据，就存到本地存储中
                localStorage.setItem('text',JSON.stringify(this.round))
            },

            // 删除商品
            del(index){
                // 删除数据时需要索引来确定删的是哪条数据
                // 利用splice删除掉传进来的那条数据，返回的是删除的数据
                this.round.splice(index,1)

                // 删除数据之后的数组再重新添加到本地存储中
                localStorage.setItem('text',JSON.stringify(this.round))
            },

            // 全选按钮
            allCheckChange(){
                // 如果全选按钮被选中了，那么就让所有按钮都被选中
                if(this.allCheck){
                    this.checks=this.round
                }else{
                    this.checks=[]
                }
            }

        },
        // 观察当所有按钮亮起来的时候，那么全选按钮也要选中
        watch:{
            checks(newVal){
                // 判断当checks中的数据和round中相等时，也就是长度一样时，就让全选按钮被勾选
                if(this.checks.length===this.round.length){
                    // 全选按钮被勾选
                    this.allCheck = true
                }else{
                    this.allCheck = false
                }
            }
        },

        // 计算被勾选的商品总价格
        computed:{
            total(){
                // 数组中有一个方法可以遍历数组并且计算总和，第一个参数是一个回调函数，total表示总和，item表示数组中每一项数据， 第二个参数是total的起始值
                let res = this.checks.reduce((total,item) => {
                    return total += item.price*item.count
                },0)
                return res.toFixed(2)    // .toFixed(2)取两位小数

            }
        },
        // 数量减少
        decrease(that){
            that.count--
        },
        increase(that){
            that.count++
        }
    }



</script>




<style scoped>
    #box{
        margin: 20px 0 0 100px;
    }
    table{
        border-collapse: collapse;
        margin-bottom: 10px;
    }
    .top,.center{
        padding: 5px 5px;
        width: 600px;
        border:2px solid ;
        margin-bottom: 10px;
    }
    th{
        background-color: aqua;
    }
    td{
        text-align: center;
        padding:0 27px;
    }
    .total{
        border: 2px solid ;
        width: 93%;
        line-height: 50px;
        font-size: 30px;
        font-weight: 900;
    }
</style>